<template>
	<view>
		<view>
			<!-- <view class="leaveNav">
				<view style="font-weight: 800;font-size: 39rpx;">巡查情况
					<view class="violationLine"></view>
				</view>
			</view> -->
			<view style="padding-bottom: 20rpx; border-bottom: 1rpx solid #b8bec6; width: 85%;margin: 0 auto;margin-top: 50rpx;color: #515c6f; ">
				<view style="display: flex;margin: 20rpx 0;">
					<view style="flex:1;">上机名称：{{obj.clsPracticeName}}</view>
					<view style="flex:1;">科目名称：{{obj.courseName}}</view>
				</view>

				<view style="display: flex;margin: 20rpx 0;">
					<view style="flex:1;">通过人数：{{obj.pass}}</view>
					<view style="flex:1;">未通过人数：{{obj.notPass}}</view>
				</view>

				<view style="display: flex;margin: 20rpx 0;">
					<view style="flex:1;">习题数量：{{obj.practiceNum}}</view>
					<view style="flex:1;">完成率：{{obj.passRate}}</view>
				</view>
			</view>
			
			<view style="width: 85%;margin: 0 auto;padding-bottom: 40rpx;">
				
				<view style="display: flex;font-size: 28rpx;margin-top: 30rpx;font-weight: bold;">
					
					<view style="flex:1;">学生姓名</view>
					<view style="flex:1;">完成数量</view>
					<view style="flex:1;">应/缺考</view>
					<view style="flex:1;">通过/不通过</view>
				</view>
				
				<view v-for="item in arr" style="padding-bottom: 20rpx; border-bottom: 1rpx solid #b8bec6; display: flex;font-size: 28rpx;margin-top: 30rpx;color:#515c6f">
					<!-- classId: 90
					className: "实训51"
					clsPracticeId: 8
					createBy: null
					createTime: "2023-02-07T03:02:34.000+00:00"
					finishNum: 8
					id: 72
					isMiss: "1"
					isPass: "0"
					modifyBy: null
					modifyTime: null
					remark: null
					studentName: "涂家文"
					studentNo: "264001" -->
					<view style="flex:1;">{{item.studentName}}</view>
					<view style="flex:1;">{{item.finishNum}}</view>
					<view style="flex:1;">{{item.isMiss | miss}}</view>
					<view style="flex:1;">{{item.isPass | pass}}</view>
				</view>
				
			</view>
			
		</view>
		
		
		<!-- <my-bottom :topName="topName"></my-bottom> -->
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '../../utils/index.js'
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	import headTitle from '../component/btnHeadeCom.vue'
	import * as imageConversion from 'image-conversion'
	export default {
		filters:{
			miss(status){
				if(status==1){
					return "参加"
					
				}else{
					return "缺考"
				}
			},
			pass(status){
				if(status==1){
					return "通过"
					
				}else{
					return "不通过"
				}
			}
		},
		data() {
			return {
				img: '',
				img2: '',
				userName: '',
				topName: '上机详情',
				id: '',

				arr: [],
				imgShow: '',
				obj: {}
			}
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: "loginName",
				success: (res) => {
					that.userName = res.data
				}
			})

			this.actualHandler = uni.getStorageSync("loginName");
		},
		onLoad(options) {
			this.obj = JSON.parse(options.str);
			console.log(this.obj)
			var that = this
			uni.request({
				url: uni.url + `clsPractice/findClsPracticeDetails/${this.obj.id}`,

				success: res => {
					console.log(res);
					this.arr = res.data.data;
				}
			})
		},
		components: {
			topCom,
			bottomCom,
			headTitle
		},

	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.violationLine {
		width: 200upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10rpx;
		left: -30upx;
	}

	.dormitoryNav {
		color: #0000FF;
		margin-left: 80rpx;
		margin-top: 30rpx;


	}

	.leaveNav {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color: blue;
		width: 20%;
		padding: 50rpx 100rpx;
		margin-bottom: -50rpx;
	}

	.leaveNav1 {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color: blue;
		width: 30%;
		padding: 10rpx 100rpx 40rpx 20rpx;
	}

	.displayStudentInfo {
		position: relative;
		top: 50rpx;
		left: 50rpx;

	}

	.repText {
		/* border: solid 1upx #999999; */
		border-radius: 20upx;
		width: 610rpx;
		height: 150upx;
		word-wrap: break-word;
		padding: 5px;
		/* margin-left:-10rpx; */
	}

	.repText2 {
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 580rpx;
		height: 300upx;
		word-wrap: break-word;
		padding: 5px;
		margin-top: 20rpx;
		/* margin-left:-10rpx; */
	}

	.attendanceLine {
		width: 600rpx;
		height: 2rpx;
		background-color: #8F8F94;
	}

	.repDevice {
		text-align: left;
		font-size: 36rpx;
		color: #808080;
		padding-left: 0rpx;
	}

	.imgSty {
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 580rpx;
		height: 300upx;
		margin: auto;
		padding: 10upx;
		margin-left: 0rpx;
		margin-top: 0rpx
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		background-size: 100%;
		width: 220upx;
		height: 70upx;
		color: white;
		font-size: 32rpx;
		font-weight: 0;
		line-height: 70rpx;
	}

	.indexContent {
		height: 100vh;
	}
</style>
